
<ul id="tree1" class="tree">
	<li class="folder f-open first"><span>系统管理</span>
		<ul>
			<li id="rolesLink" class="doc"><span><a>角色</a></span></li>
			<li id="usersLink" class="doc"><span><a>用户</a></span></li>			
			<li id="authLink" class="doc"><span><a>权限</a></span></li>
			<li id="splitPanelLink" class="doc"><span><a>控制面板</a></span></li>
		</ul>
	</li>
	<li class="folder f-open"><span>Windows</span>
		<ul>
			<li id="ajaxpageLink" class="doc"><span><a>Ajax/XHR Demo</a></span></li>
			<li id="jsonLink" class="doc"><span><a>Json Demo</a></span></li>
			<li id="youtubeLink" class="doc"><span><a>Iframe: YouTube</a></span></li>
			<li id="accordiantestLink" class="doc"><span><a>Accordian</a></span></li>
			<li id="parametricsLink" class="doc"><span><a>Window Parametrics</a></span></li>
			<li id="splitWindowLink" class="doc"><span><a>Split Window</a></span></li>						
		</ul>
	</li>
	<li class="folder f-open"><span>Widgets</span>
		<ul>
			<li id="calendarLink" class="doc"><span><a>Calendar (Plugin)</a></span></li>
			<li id="clockLink" class="doc"><span><a>Clock</a></span></li>						
		</ul>
	</li>	
	<li class="folder f-open"><span>Tools</span>
		<ul>
			<li id="fxmorpherLink" class="doc"><span><a>Path Animation (Plugin)</a></span></li>				
		</ul>
	</li>					
</ul>
<script type="text/javascript">
  //导入该页面片段所需的css与js后创建树结构
	new MUI.Require({
			css: [MUI.path.plugins + 'tree/css/style.css'],
			js: [MUI.path.plugins + 'tree/scripts/tree.js'],
			onload: function(){
				if (buildTree) buildTree('tree1');
			}	
	});
	var mainPanel = 'mainPanel';
	
	$('rolesLink').addEvent('click', function(e){
		if ($(mainPanel)){
			MUI.closePanel(mainPanel);
		}
		
		new MUI.Panel({
			id: mainPanel,
			title: '角色',
			contentURL: '/mochaui/data/roles.html',
			column: 'mainColumn',
			headerToolbox:true,
			headerToolboxURL:'/mochaui/data/role.toolbar.html',
			padding: { top: 8, right: 8, bottom: 8, left: 8 },
			collapsible:false,
		});
		
	});
	
	
	$('usersLink').addEvent('click', function(e){
		if ($(mainPanel)){
			MUI.closePanel(mainPanel);
		}
		
		new MUI.Panel({
			id: mainPanel,
			title: '用户',
			contentURL: '/mochaui/data/users.html',
			column: 'mainColumn',
			headerToolbox:true,
			headerToolboxURL:'/mochaui/data/users.toolbar.html',
			padding: { top: 8, right: 8, bottom: 8, left: 8 },
			collapsible:false
		});
	});
	
	$('authLink').addEvent('click', function(e){
		if ($(mainPanel)){
			MUI.closePanel(mainPanel);
		}
		
		new MUI.Panel({
			id: mainPanel,
			title: '权限',
			contentURL: '/mochaui/data/auth.html',
			column: 'mainColumn',
			headerToolbox:false,
			padding: { top: 8, right: 8, bottom: 8, left: 8 },
			collapsible:false
		});
		// MUI.splitPanelPanel();
	 
	});
	
	
</script>
